<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客列表</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="assets/css/style.css">
<style type="text/css">
#blogs tr{margin:5px 0;height:30px;}
.addBlog{display:inline-block;width:65px;height:30px;background:#999;color:#fff !important;margin-bottom:10px;text-align:center;line-height:30px;}
.handleB{display:inline-block;width:35px;margin-right:5px;height:30px;background:#999;color:#fff !important;margin-bottom:10px;text-align:center;line-height:30px;
cursor:pointer;}
#bkList li{height:40px;line-height:40px;font-size:14px;}
#bkList li span{margin-left:30px;}
a{color:#337ab7 !important;}
#bkList{float:left;width:100%;}
#bkList li{float:left;width:100%;}
#bkList a,#bkList span{float:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#bkList a{width:75%;}
#bkList span{width:25%;margin:0 !important;} 
</style>
</head>

<body class="Spage_body">
<!-- top-head -->
<div class="top_head">
	博客列表
	<a href="javascript:void(0)" class="top_head_back" onClick="window.location.href='/blog'"><img src="assets/images/back_btn.png"></a>
</div>
<!-- top-head -->
<!-- wrap -->
<!-- login_box -->
<div class="container login_box" style="padding:15px 2%;">
	<ul id="bkList">
		
	</ul>
</div>

<!-- login_box -->
<!-- wrap -->
<script type="text/javascript" src="assets/scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="assets/scripts/hr-jquery.js"></script>
<script>
	$(document).ready(function(){
		var $page = 1;
		var $pageSize = 5;
		var $total;

		getBlogs();
		
		function getBlogs(){
			
			$.ajax({
				type:"post",
				url:"listGetBolgs",
				dataType:"json",
				data:{
					"rqpage":$page
				},
				success:function(data){
					$("#bkList li").remove();
					for(var i=0;i<data.length;i++){
						var $pT = (data[i].publishT).split(" ")[0];
						var $li = $("<li><a href='content?blogId=" + data[i].id +  "'>" + data[i].title +"</a><span>" + $pT + "</span></li>");
						$("#bkList").append($li);
					}
				}
			})
		}
		
		//分页====================================
		//获取总页码
		$.get("listGetTagTotalByUserNameAndTag",function(data){
			$total = data;
			$pageTotal = Math.ceil($total / $pageSize);
			$pageBox = $("<shiro:user><div id='pageBox'></div></shiro:user>");
			$firstPage = $("<a href='javascript:void(0);' data-page='1'>首页</a>");
			$lastPage = $("<a href='javascript:void(0);' data-page='" + $pageTotal + "'>尾页</a>");
			$prevPage = $("<a href='javascript:void(0);' id='prev'>上一页</a>");
			$nextPage = $("<a href='javascript:void(0);' id='next'>下一页</a>");
			$pageNumber = $("<p class='pageNumber'></p>")
			$pageBox.append($firstPage);
			$pageBox.append($prevPage);
			$pageBox.append($pageNumber);
			$pageBox.append($nextPage);
			$pageBox.append($lastPage);
			$(".container").append($pageBox);
			if($pageTotal <= 5){
				$pageNumber.append(lessPageN($pageTotal)); 
			}else{
				$pageNumber.append(defaultPageN()); 
			}
		})
		//页码点击改变页数，改变样式
		$(".container").on("click","#pageBox a",function(){
			var $thisPage = $(this).attr("data-page");
			var $thisHtml = $(this).html();
			
			if(!$thisPage){
				if($thisHtml == "上一页" && $page > 1){
					$page--;
					getBlogs();
				}else if($thisHtml == "下一页" && $page < $pageTotal){
					$page++;
					getBlogs();
				}else{
					return;
				}
			}else{
				$page = $thisPage;
				getBlogs();
			}
			//小于等于展示页数时
			if($pageTotal <= 5){
				$(".pageNumber span").remove();
				$pageNumber.append(lessPageN($pageTotal));
			}else{//大于展示页数时
				//刚好6页时
				if($pageTotal == 6){
					//page<4时
					if($page < 4){
						$(".pageNumber a").remove();
						$pageNumber.append(defaultPageN()); 
					}else{
						$(".pageNumber a").remove();
						$pageNumber.append(sixPageN()); 
					}
				}
				//大于6页时
				if($pageTotal > 6){
					//page<4时
					if($page < 4){
						$(".pageNumber a").remove();
						$pageNumber.append(defaultPageN()); 
					}else if($page >= 4 && $page <= $pageTotal - 2){
						$(".pageNumber a").remove();
						$pageNumber.append(middlePageN($page)); 
					}else{
						$(".pageNumber a").remove();
						$pageNumber.append(lastPageN()); 
					}
				}
			}
			//点击样式
			pageStyle();
		});
		//小于等于5页
		function lessPageN(pageTotal){
			var $span = $("<span></span>");
			var $as;
			for(var i=1;i<=pageTotal;i++){
				if(i == 1){
					$as = $("<a href='javascript:void(0);' class='active' data-page='" + i + "'>" + i + "</a>");
				}else{
					$as = $("<a href='javascript:void(0);' data-page='" + i + "'>" + i + "</a>");
				}
				$span.append($as);
			}
			return $span;
		}
		//大于5页
		//等于6页尾几页
		function sixPageN(){
			var $as = $("<a href='javascript:void(0);' class='active' data-page='2'>2</a>"
					+ "<a href='javascript:void(0);' data-page='3'>3</a>"
					+ "<a href='javascript:void(0);' data-page='4'>4</a>"
					+ "<a href='javascript:void(0);' data-page='5'>5</a>"
					+ "<a href='javascript:void(0);' data-page='6'>6</a>"
			);
			return $as;
		}
		//初始页码
		function defaultPageN(){
			var $as = $("<a href='javascript:void(0);' class='active' data-page='1'>1</a>"
					+ "<a href='javascript:void(0);' data-page='2'>2</a>"
					+ "<a href='javascript:void(0);' data-page='3'>3</a>"
					+ "<a href='javascript:void(0);' data-page='4'>4</a>"
					+ "<a href='javascript:void(0);' data-page='5'>5</a>"
			);
			return $as;
		}
		//中间的页码
		function middlePageN(page){
			var $mPage = parseInt(page);
			var $as = $("<a href='javascript:void(0);' data-page='" + ($mPage-2) + "'>" + ($mPage-2) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage-1) + "'>" + ($mPage-1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + $mPage + "'>" + $mPage + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage+1) + "'>" + ($mPage+1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage+2) + "'>" + ($mPage+2) + "</a>"
			);
			return $as;
		}
		//最后的页码
		function lastPageN(){
			var $lastPage = parseInt($pageTotal);
			var $as = $("<a href='javascript:void(0);' data-page='" + ($lastPage-4) + "'>" + ($lastPage-4) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-3) + "'>" + ($lastPage-3) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-2) + "'>" + ($lastPage-2) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-1) + "'>" + ($lastPage-1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + $lastPage + "'>" + $lastPage + "</a>"
			);
			return $as;
		}
		//点击页码样式
		function pageStyle(){
			$("#pageBox a").removeClass("active");
			$(".pageNumber a").filter(function(){
				if($(this).html() ==$page){
					$(this).addClass("active");
				}
			});
		}
		//分页====================================
	});
</script>
</body>
</html>